<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
		<link rel="stylesheet" href="http://cdn.jtsage.com/datebox/1.4.5/jqm-datebox-1.4.5.min.css" />
		<link rel="stylesheet" href="../themes/Bootstrap.css" />
		<link rel="stylesheet" href="../themes/jquery.mobile.icons.min.css" />
		<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
		<script type="text/javascript" src="http://cdn.jtsage.com/datebox/1.4.5/jqm-datebox-1.4.5.core.min.js"></script>
    	<script type="text/javascript" src="http://cdn.jtsage.com/datebox/1.4.5/jqm-datebox-1.4.5.mode.calbox.min.js"></script>
    	<script type="text/javascript" src="../js/jquery.blockUI.js"></script>
    	<script type="text/javascript">
    	
    		var data = {};
			
		    $(document).ready(function(){
		    	
				initDate();
				getList();
				
				$('#search').click(function() {
					setDate();
					getList();
				});
			});
			
			
			function initDate() {
				var	date1 = new Date();
					
				data.type = 'trad';
				data.gb = "default";
				
				if (0 === date1.getDay()) {
					date1.setDate(date1.getDate() - 2);
				 } else if (1 === date1.getDay()) {
					date1.setDate(date1.getDate() - 3);
				} else {
					date1.setDate(date1.getDate() - 1);
				}
				
				data.standDt = date1.getFullYear() + ("00" + (date1.getMonth() + 1)).slice(-2) + ("00" + date1.getDate()).slice(-2); 
				
				$('#mode1').val(date1.getFullYear() +'-'+ ("00" + (date1.getMonth() + 1)).slice(-2) +'-'+("00" + date1.getDate()).slice(-2));
				
			
			}
			
			function setDate() {

				data = {};
				data.type = 'trad';
				data.gb = "default";
				nowdate = '';
				
				var sday = $('#mode1').val().replace(/-/gi,"");
				var year = sday.substring(0,4);
				var mon  = sday.substring(4,6);
				var day  = sday.substring(6,8);
		
				if (mon.substring(0,1) == '0' ) {
					mon = mon.substring(1,2);
				}
				
				if (day.substring(0,1) == '0') {
					day = day.substring(1,2);
				}
				
				var date1 = new Date(year, mon, day);
				
				data.standDt = date1.getFullYear() + ("00" + (date1.getMonth())).slice(-2) + ("00" + date1.getDate()).slice(-2); 
				
						
			}
			
			function getList() {

				$.ajax({
				type: 'POST',
				url: '/search',
				data: JSON.stringify(data),
				dataType : "json", 
				contentType: 'application/json',
				beforeSend: function () {
			            $.blockUI({ 
			                message: '<img src="../themes/images/ajax-loader.gif" width="50" height="50"/>',
			                css: { 
			                    top:  ($(window).height() - 100) /2 + 'px', 
			                    left: ($(window).width() - 100) /2 + 'px',
			                    color:      '',
			                    border:     '',
			                    backgroundColor:'',                     
			                    width: '100px' 
			                }                
			                
			            }); 
			     },
				success : function(data){ // 성공시 data값.
				
					$.unblockUI(); 
					var newRows = '';
					
					if($.isArray(data) && data.length > 0  ){ //배열확인
						
						
						$.each(data,function(i){//loop
							newRows += '<tr>';
							newRows += '<td align="left"><a href="#empty-anchor" onclick="javascript:goInvstor(\''+data[i].stock_date+'\',\''+data[i].stock_cd+'\');"  data-rel="external">'+data[i].stock_nm+'</a></td>';
             				newRows += '<td align="right">'+data[i].closing_price+'원</td>';
             				newRows += '<td align="right">'+data[i].avg_tv+'</td>';
             				newRows += '<td align="right">'+data[i].trading_volum+'</td>';
             				newRows += '</tr>';
						});
						
						
					} else {
						   newRows += '<tr>';
						   newRows += '<td colspan="4">데이타가 없습니다.</td>';
						   newRows += '</tr>';
					}
					
					$('#mytable tbody').empty()
							 .append( newRows )
							 .closest( "#mytable" )
		           			 .table("refresh" )
		                	 .trigger( "create" );
					
					
				},
			    error : function(request, status, error) {
			    
				 //통신 에러 발생시 처리
					alert("code : " + request.status + "\r\nmessage : " + request.reponseText +" \r\n error : " + error);
					$.unblockUI(); 
					}
				});
			}
			
			function goInvstor(dt,cd){
				$("#stock_cd").val(cd);
				$("#stock_date").val(dt);
				$("#form").submit();
			}
		</script>
   </head>
	<body>
		<div data-role="page" data-theme="a">
			<div data-role="header" data-position="inline">
				<h1>거래량 급등 종목</h1>
				<a href="/" class="ui-btn-right" data-theme="a" data-icon="home">home</a>
			</div>
			<div data-role="content" data-theme="a">
				<center>
					<img id="sign-logo" src="/images/stock.png" />
				</center> 
				<div class="ui-field-contain">
          	    	<label for="mode1">조회 일자</label>
            		<input name="mode1" id="mode1" type="text" data-role="datebox" data-options='{"mode":"calbox"}' />
          		</div>
	          	<button id ="search" class="ui-btn ui-mini ui-shadow ui-corner-all ui-btn-icon-left ui-icon-search ui-btn-inline ">검색</button>
				<table id="mytable" data-role="table" data-mode="columntoggle" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-btn-theme="a" data-column-btn-text="항목 선택" data-column-popup-theme="a">
		        	<thead>
		             	<tr class="ui-bar-a" >
		                	<th>종목명</th>
			             	<th data-priority="4">종가</th>
			             	<th data-priority="3">평균 거래량</th>
			             	<th data-priority="1"><abbr title="거래량">거래량</abbr></th>
		           		</tr>
		         	</thead>
		         	<tbody>
		         	</tbody>
	       		</table>
			</div>
			<div data-role="footer" data-theme="a">
				<center> Copyright © 2015 UpDiosSystems Ins. </center> 
			</div>
		</div>
		<form id="form" name="form" method="post" target="_self" action="/investor">
			<input type="hidden" id="stock_cd" name="stock_cd" value="" />
			<input type="hidden" id="stock_date" name="stock_date" value="" />
			<input type="hidden" id="path" name="path" value="trad" />
		</form>
		
	</body>
</html>